// app/signup/page.tsx - 注册页面
'use client'

import { useState } from 'react'
import { Button, Input, message } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { useRouter } from 'next/navigation'
import { authService } from '@/lib/services'
import type { RegisterRequest } from '@/lib/types'
import { AuthProvider, useAuth } from '@/app/context/auth-context'
import PhoneInput from '@/app/components/auth/phone-input'
import VerificationCodeInput from '@/app/components/auth/verification-code-input'
import PasswordInput from '@/app/components/auth/password-input'

function SignUpForm() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const { 
    username,
    setUsername,
    usernameError,
    phone, 
    verificationCode,
    password,
    validatePhone,
    validatePassword,
    validateVerificationCode,
    validateUsername,
    login
  } = useAuth()

  const handleSubmit = async () => {
    try {
      // 验证所有字段
      const isUsernameValid = validateUsername(username)
      const isPhoneValid = validatePhone(phone)
      const isPasswordValid = validatePassword(password)
      const isVerificationCodeValid = validateVerificationCode(verificationCode)
      
      if (!isUsernameValid || !isPhoneValid || !isPasswordValid || !isVerificationCodeValid) {
        return
      }

      setLoading(true)
      const registerData = {
        username,
        phone,
        password,
        verification_code: verificationCode
      } as RegisterRequest
      
      // 注册
      await authService.register(registerData)
      message.success('注册成功')
      
      // 注册成功后直接登录
      await login(username, password)
      
      // 登录成功后跳转到首页
      router.push('/')
    } catch {
      // 错误已经在 handleError 中处理
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="space-y-6">
      <div className="mb-4">
        <Input
          required
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          status={usernameError ? 'error' : ''}
          prefix={<UserOutlined />}
          placeholder="请输入用户名"
          size="large"
        />
        {usernameError && (
          <div className="mt-1 text-red-500 text-sm">{usernameError}</div>
        )}
      </div>
      
      <PhoneInput />
      <VerificationCodeInput />
      
      <PasswordInput 
        placeholder="设置密码"
      />

      <PasswordInput 
        isConfirm
        placeholder="确认密码"
      />

      <Button
        type="primary"
        size="large"
        block
        loading={loading}
        onClick={handleSubmit}
      >
        注册
      </Button>

      <div className="text-center">
        <span className="text-gray-500">已有账号？</span>
        <Button 
          type="link" 
          className="text-blue-500"
          onClick={() => router.push('/signin')}
        >
          立即登录
        </Button>
      </div>
    </div>
  )
}

export default function SignUpPage() {
  return (
    <AuthProvider>
      <SignUpForm />
    </AuthProvider>
  )
} 